<!-- 查看详情 -->
<script setup lang='ts' name="housing-resources-detail">
import type { VxeGridInstance, VxeGridListeners } from 'vxe-table'

import { getCompanyOrgDetail } from '@fl/api/iam-api'
import { flowHttp } from '@fl/api/work-flow'
import { ElButton, ElCard, ElCol, ElForm, ElFormItem, ElRow, ElTag } from 'element-plus'
import { reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

import TagItem from './tagItem.vue'

const router = useRouter()
const route = useRoute()

const detail = ref<any>({})

const gridOptions = reactive<any>({
    border: true,
    columnConfig: {
        resizable: true,
    },
    columns: [
        { field: 'qiyh', title: '设备编号' },
        { field: 'qiymc', title: '设备名称' },
        { field: 'qiyzt', title: '设备类型' },
        { field: 'qiyjc', title: '设备型号' },
        { field: 'tongyxydm', title: '品牌名称' },
        { field: 'qiyfr', title: '项目名称' },
        { field: 'suosxy', title: '安装位置' },
        { slots: { default: 'status' }, title: '设备状态' },
        { field: 'yaoqsj', title: '创建时间', width: 100 },
    ],
    data: [],
    editConfig: {
        mode: 'row',
        showStatus: true,
        trigger: 'manual',
    },
    height: 300,
    keepSource: true,
    loading: false,
    showOverflow: true,
})

const xGrid = ref<VxeGridInstance<any>>()

// TODO: 暂时不做
const gridEvents: VxeGridListeners<any> = {
    pageChange({ currentPage, pageSize }) {
        if (gridOptions.pagerConfig) {
            gridOptions.pagerConfig.currentPage = currentPage
            gridOptions.pagerConfig.pageSize = pageSize
        }
        getData()
    },
}

async function getData() {
    gridOptions.loading = true
    getCompanyOrgDetail({
        id: detail.value?.ObjectID || '',
    }).then((res: any) => {
        gridOptions.data = res ?? []
        gridOptions.loading = false
    })
}

async function queryData(params: any) {
    return await flowHttp('query', {
        body: {
            data: {
                code: 'ad91b0d88fa11097', // 房源code dev pro 写死
                ...params,
            },
        },
    })
}

async function getDetail(value: string) {
    const res = await queryData({
        filter: [
            {
                filed: 'ObjectID',
                value,
            },
        ],
        pageInfo: {
            page: 1,
            size: 10,
        },
    })
    // TODO: 同工作流网关 企业机构管理 租赁管理 后端返回数据结构不一致 res拦截器不做统一处理
    const { data: { data } } = res
    detail.value = {
        ...data.Datas[0],
    }
    console.log('详情', data.Datas[0])
}

function goToList() {
    router.push('/house-source-center/lease-approval/housing-resources')
}

function init() {
    const ObjectID: any = route.query?.ObjectID
    getDetail(ObjectID)
}
init()
</script>

<template>
    <ElCard class="mb-20">
        <ElRow>
            <ElButton @click="goToList">
                返回列表
            </ElButton>
        </ElRow>

        <div pl-20>
            <div class="info-title">
                房源信息
            </div>

            <ElForm :model="detail"
                    label-width="auto"
            >
                <ElRow :gutter="20">
                    <ElCol :span="8">
                        <ElFormItem label="所属企业:">
                            {{ detail.suosqy }}
                        </ElFormItem>
                    </ElCol>

                    <ElCol :span="8">
                        <ElFormItem label="所属项目:">
                            {{ detail.xiangmmc }}
                        </ElFormItem>
                    </ElCol>

                    <ElCol :span="8">
                        <ElFormItem label="所属户型:">
                            {{ detail.huxxx }}
                        </ElFormItem>
                    </ElCol>

                    <ElCol :span="8">
                        <ElFormItem label="房屋编号:">
                            {{ detail.fangwbh }}
                        </ElFormItem>
                    </ElCol>

                    <ElCol :span="8">
                        <ElFormItem label="房源核验码:">
                            {{ detail.fangwhym }}
                        </ElFormItem>
                    </ElCol>

                    <ElCol :span="8">
                        <ElFormItem label="房号:">
                            {{ detail.fangh }}
                        </ElFormItem>
                    </ElCol>

                    <ElCol :span="8">
                        <ElFormItem label="月租原价:">
                            {{ detail.zujjg }}
                        </ElFormItem>
                    </ElCol>

                    <ElCol :span="8">
                        <ElFormItem label="房源状态:">
                            <TagItem dict-key="houseStatus"
                                     :label="detail.fangjzt"
                                     :value="detail.fangjzt_Id"
                            />
                        </ElFormItem>
                    </ElCol>

                    <ElCol :span="8">
                        <ElFormItem label="上架审批状态:">
                            <TagItem dict-key="status"
                                     :label="detail.shangjspzt"
                            />
                        </ElFormItem>
                    </ElCol>

                    <ElCol :span="8">
                        <ElFormItem label="栋:">
                            {{ detail.dongbh }}
                        </ElFormItem>
                    </ElCol>

                    <ElCol :span="8">
                        <ElFormItem label="单元:">
                            {{ detail.dany }}
                        </ElFormItem>
                    </ElCol>

                    <ElCol :span="8">
                        <ElFormItem label="楼层:">
                            {{ detail.louc }}
                        </ElFormItem>
                    </ElCol>

                    <ElCol :span="8">
                        <ElFormItem label="建筑面积:">
                            {{ detail.fangwjzmj }}
                        </ElFormItem>
                    </ElCol>

                    <ElCol :span="8">
                        <ElFormItem label="套内面积:">
                            {{ detail.taonmj }}
                        </ElFormItem>
                    </ElCol>

                    <ElCol :span="8">
                        <ElFormItem label="装修状况:">
                            {{ detail.zhuangxzk }}
                        </ElFormItem>
                    </ElCol>

                    <ElCol :span="8">
                        <ElFormItem label="房屋朝向:">
                            {{ detail.fangwcx }}
                        </ElFormItem>
                    </ElCol>

                    <ElCol :span="8">
                        <ElFormItem label="街道门牌号:">
                            {{ detail.jiedmph }}
                        </ElFormItem>
                    </ElCol>
                </ElRow>

                <div class="info-title">
                    房源属性信息
                </div>

                <ElRow :gutter="20">
                    <ElCol :span="12">
                        <ElFormItem label="房屋管理类型:">
                            {{ detail.fangwgllx }}
                        </ElFormItem>
                    </ElCol>

                    <ElCol :span="12">
                        <ElFormItem label="房源属性:">
                            {{ detail.fangylx }}
                        </ElFormItem>
                    </ElCol>

                    <ElCol :span="12">
                        <ElFormItem label="租赁住房类型:">
                            {{ detail.zulzflx }}
                        </ElFormItem>
                    </ElCol>

                    <ElCol :span="12">
                        <ElFormItem label="租赁类型:">
                            {{ detail.zullx }}
                        </ElFormItem>
                    </ElCol>
                </ElRow>

                <div class="info-title">
                    合租信息
                </div>

                <ElRow :gutter="20">
                    <ElCol :span="8">
                        <ElFormItem label="房间号（合租）:">
                            {{ detail.fangjh }}
                        </ElFormItem>
                    </ElCol>

                    <ElCol :span="8">
                        <ElFormItem label="房间名称（合租）:">
                            {{ detail.fangjmc }}
                        </ElFormItem>
                    </ElCol>

                    <ElCol :span="8">
                        <ElFormItem label="房间面积（合租）:">
                            {{ detail.fangjmj }}
                        </ElFormItem>
                    </ElCol>

                    <ElCol :span="8">
                        <ElFormItem label="是否有独立卫生间（合租）:">
                            {{ detail.shifydlwsj }}
                        </ElFormItem>
                    </ElCol>

                    <ElCol :span="8">
                        <ElFormItem label="是否有独立阳台（合租）:">
                            {{ detail.shifydlyt }}
                        </ElFormItem>
                    </ElCol>
                </ElRow>

                <div class="info-title">
                    产权信息
                </div>

                <ElRow :gutter="20">
                    <ElCol :span="24">
                        <ElFormItem label="是否有产权:">
                            {{ detail.shifycq }}
                        </ElFormItem>
                    </ElCol>

                    <ElCol :span="12">
                        <ElFormItem label="权属证书类型:">
                            {{ detail.quanszslx }}
                        </ElFormItem>
                    </ElCol>

                    <ElCol :span="12">
                        <ElFormItem label="权属证书号码:">
                            {{ detail.quanszshm }}
                        </ElFormItem>
                    </ElCol>

                    <ElCol :span="12">
                        <ElFormItem label="权利人姓名:">
                            {{ detail.quanlrxm }}
                        </ElFormItem>
                    </ElCol>

                    <ElCol :span="12">
                        <ElFormItem label="权利人身份证:">
                            {{ detail.quanlrsfz }}
                        </ElFormItem>
                    </ElCol>
                </ElRow>
            </ElForm>

            <div v-if="false"
                 class="info-title"
            >
                智能设备列表
            </div>

            <!-- 列表 -->
            <vxe-grid v-if="false"
                      ref="xGrid"
                      v-bind="gridOptions"
                      v-on="gridEvents"
            >
                <template #qiyjb="{ row }">
                    <div class="flex gap-2">
                        <ElTag v-if="row.qiyjb === '1'"
                               type="warning"
                        >
                            一级
                        </ElTag>
                    </div>
                </template>
            </vxe-grid>
        </div>

        <div style="text-align: center;margin-top: 20px;">
            <ElButton type="primary"
                      @click="goToList"
            >
                审批
            </ElButton>

            <ElButton @click="goToList">
                驳回
            </ElButton>
        </div>
    </ElCard>
</template>

<style lang="less" scoped>
.info-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 60px;
}
</style>
